import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../../store";
import userUrl from "../../assets/images/user.png";
import { useNavigate } from "react-router-dom";
import { Cell, Dialog } from "react-vant";
import { useAppDispatch, useAppSelector } from "../../store/hooks";
import { quitLoginActionCreator } from "../../store/user/userReducer";
const Index: React.FC = () => {
  const token = useAppSelector((state) => state.user.token);
  const avator = useAppSelector((state) => state.user.avator);
  const nickname = useAppSelector((state) => state.user.nickname);
  const orderList = useAppSelector((state) => state.user.orderList);
  const dispatch = useAppDispatch();

  const countNotPay = orderList.reduce((p, n) => {
    return n.state === "待付款" ? p + 1 : p;
  }, 0);
  const countPayed = orderList.reduce((p, n) => {
    return n.state === "待收货" ? p + 1 : p;
  }, 0);
  const navigate = useNavigate();

  const toOrderList = (state: string) => {
    navigate("/order/list?state=" + state);
  };

  const quit = () => {
    if (token)
      Dialog.confirm({
        title: "警告",
        message: "确定要退出吗？",
      })
        .then(() => {
          dispatch(quitLoginActionCreator());
        })
        .catch(() => {});
  };

  return (
    <div className="my">
      <div className="user">
        <img src={avator || userUrl} alt="" />
        {avator ? (
          <span>{nickname}</span>
        ) : (
          <span onClick={() => navigate("/login")}>未登录， 请登录</span>
        )}
      </div>
      <div className="card-item">
        <div className="card-top">
          <span>我的收藏</span>
          <span>我的点赞</span>
          <span>我的足迹</span>
        </div>
        <div className="card-content">
          <dl onClick={() => toOrderList("待付款")}>
            <dt>
              <img src={require("../../assets/images/待付款.png")} alt="" />
            </dt>
            <dd>待付款</dd>
            {countNotPay === 0 ? (
              ""
            ) : (
              <span className="count">{countNotPay}</span>
            )}
          </dl>
          <dl onClick={() => toOrderList("待收货")}>
            <dt>
              <img src={require("../../assets/images/待收货.png")} alt="" />
            </dt>
            <dd>待收货</dd>
            {countPayed === 0 ? (
              ""
            ) : (
              <span className="count">{countPayed}</span>
            )}
          </dl>
          <dl onClick={() => toOrderList("退换/售后")}>
            <dt>
              <img src={require("../../assets/images/退换售后.png")} alt="" />
            </dt>
            <dd>退换/售后</dd>
          </dl>
          <dl onClick={() => toOrderList("全部订单")}>
            <dt>
              <img src={require("../../assets/images/全部订单.png")} alt="" />
            </dt>
            <dd>全部订单</dd>
          </dl>
        </div>
      </div>

      <div className="card-item">
        <div className="card-content">
          <dl>
            <dt>
              <img src={require("../../assets/images/优惠卷.png")} alt="" />
            </dt>
            <dd>优惠卷</dd>
          </dl>
          <dl>
            <dt>
              <img src={require("../../assets/images/白条额度.png")} alt="" />
            </dt>
            <dd>白条额度</dd>
          </dl>
          <dl>
            <dt>
              <img src={require("../../assets/images/京豆.png")} alt="" />
            </dt>
            <dd>京豆</dd>
          </dl>
          <dl>
            <dt>
              <img src={require("../../assets/images/京豆.png")} alt="" />
            </dt>
            <dd>红包</dd>
          </dl>
          <dl>
            <dt>
              <img src={require("../../assets/images/全部资产.png")} alt="" />
            </dt>
            <dd>全部资产</dd>
          </dl>
        </div>
      </div>

      {token && (
        <div>
          <Cell.Group style={{ marginBottom: 10 }}>
            <Cell
              title="收货地址"
              isLink
              onClick={() => navigate("/address/list")}
            />
            <Cell title="设置" isLink />
          </Cell.Group>
          <Cell.Group style={{ marginBottom: 10 }}>
            <Cell title="退出登录" isLink onClick={() => quit()} />
          </Cell.Group>
        </div>
      )}
    </div>
  );
};

export default Index;
